<template>
	<div>
        <mj-title type="h2" title="Loading 加载中"></mj-title>
        <div class="page-desc">用于页面和区块的加载中状态。</div>

        <mj-title type="h5" title="基础使用"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="mb15">
					<mj-switch v-model="loading1"></mj-switch>  改变loading状态
				</div>
				<div style="width: 400px;height: 200px;line-height:200px;text-align:center;border: 1px solid #ddd" v-loading="loading1">content</div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;div class="mb15">
					    &lt;mj-switch v-model="loading1">&lt;/mj-switch>  改变loading状态
					  &lt;/div>
					  &lt;div style="width: 400px;height: 200px;line-height:200px;text-align:center;border: 1px solid #ddd" 
					  v-loading="loading1">
					  content&lt;/div>
					&lt;/template>
					&lt;script>
					  export default {
					    data () {
					      return {
					        loading1: true
					      }
					    },
					  }
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="自定义"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<div class="mb15">
					<mj-switch v-model="loading2"></mj-switch>  改变loading状态
				</div>
  				<div style="width: 100%;height: 200px;line-height:200px;text-align:center;border: 1px solid #ddd" v-loading="loading2" mj-loading-text="玩命加载中.." mj-loading-spinner="icon icon-refresh" mj-loading-background="rgba(0, 0, 0, 0.8)">容器区域</div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;div style="width: 100%;height: 200px;border: 1px solid #ddd" 
					  v-loading="loading2" 
					  mj-loading-text="玩命加载中..." 
					  mj-loading-spinner="icon icon-refresh" 
					  mj-loading-background="rgba(0, 0, 0, 0.8)"
					  容器区域&lt;/div>
					&lt;/template>
					&lt;script>
					  export default {
					    data () {
					      return {
					        loading2: true
					      }
					    }
					  }
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="整页加载"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
            	<div class="mb10">
					<mj-button type="primary" @click="openFullScreen" v-loading.body.lock="fullScreenLoading">指令加载</mj-button>
					<mj-button type="primary" @click="openFullScreen2">服务方式</mj-button>
            	</div>
				<ul class="page-list">
					<li>通过服务方式只能是插入至body</li>
				</ul>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
					&lt;template>
					  &lt;div>
					  &lt;mj-button type="primary" @click="openFullScreen" v-loading.body.lock="fullScreenLoading">加载&lt;/mj-button>
					  &lt;mj-button type="primary" @click="openFullScreen2">服务方式&lt;/mj-button>
					&lt;/div>
					&lt;/template>
					&lt;script>
					export default {
					  data () {
					    return {
					      fullScreenLoading: false
					    }
					  },
					  methods: {
					    openFullScreen () {
					      this.fullScreenLoading = true
					      setTimeout(() => {
					        this.fullScreenLoading = false
					      }, 2000)
					    },
					    openFullScreen2 () {
					       const loading = this.$loading({
					          lock: true,
					          text: 'Loading',
					          spinner: 'icon icon-refresh',
					          background: 'rgba(0, 0, 0, 0.7)',
					          //el:'.className' //使用此方法打开时还可以指定插入的位置，可以是样式或id
					          })
					       setTimeout(() => {
					          loading.close()
					       }, 2000)
					    }
					  }
					}
					&lt;/script>
					</code>
				</pre>
            </mj-tab-pane>
        </mj-tabs>

        <mj-title type="h5" title="更多风格"></mj-title>
        <mj-tabs class="mb50">
            <mj-tab-pane label="HTML" name="html">
				<mj-radio-group :data="loadTypeData" v-model="loadTypeValue" type="button-space" :change="loadSkinChange"></mj-radio-group>
				<div class="demo-loading" v-loading="loading3" v-show="loadTypeValue=='default'">
					default
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="bars"  v-show="loadTypeValue=='bars'">
					bars
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="oval"  v-show="loadTypeValue=='oval'">
					oval
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="puff" v-show="loadTypeValue=='puff'">
					puff
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="three-dots" v-show="loadTypeValue=='three-dots'">
					three-dots
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="ball-triangle" v-show="loadTypeValue=='ball-triangle'">
					ball-triangle
				</div>
				<div class="demo-loading" v-loading="loading3" mj-loading-skin="square-jelly" v-show="loadTypeValue=='square-jelly'">
					square-jelly
				</div>
            </mj-tab-pane>
            <mj-tab-pane label="CODE" name="code">
				<pre>
					<code class="language-html line-numbers">
						&lt;template>
							&lt;div class="demo-loading" v-loading="loading3">default&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="bars">bars&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="oval">oval&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="puff">puff&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="three-dots">three-dots&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="ball-triangle">ball-triangle&lt;/div>
							&lt;div class="demo-loading" v-loading="loading3" mj-loading-skin="square-jelly">square-jelly&lt;/div>
						&lt;/template>
					</code>
				</pre>
			</mj-tab-pane>
		</mj-tabs>

		<mj-title type="h5" title="API"></mj-title>
		<mj-title type="h6" title="Loading 参数"></mj-title>
		<table class="api-table">

			<thead>
				<tr>
					<th>属性</th>
					<th>说明</th>
					<th>类型</th>
					<th>默认值</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>text</td>
					<td>显示在加载图标下方的加载文案</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>background</td>
					<td>遮罩背景色</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>spinner</td>
					<td>自定义加载图标类名</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>lock</td>
					<td>锁定滚动</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>zindex</td>
					<td>层级</td>
					<td>Number</td>
					<td>-</td>
				</tr>
				<tr>
					<td>body</td>
					<td>将遮罩层插入到body</td>
					<td>Boolean</td>
					<td>false</td>
				</tr>
				<tr>
					<td>el</td>
					<td>指定插入的位置，可以是样式或id</td>
					<td>String</td>
					<td>-</td>
				</tr>
				<tr>
					<td>skin</td>
					<td>loading风格，可选风格<code>bars</code>,<code>oval</code>,<code>puff</code>,<code>three-dots</code>,<code>ball-triangle</code>,<code>square-jelly</code></td>
					<td>String</td>
					<td>-</td>
				</tr>
			</tbody>
		</table>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				loading1: true,
				loading2: true,
				loading3: true,
				fullScreenLoading: false,
                loadTypeData: [
                    {label: '默认', value: 'default'},
                    {label: 'bars', value: 'bars'},
                    {label: 'oval', value: 'oval'},
                    {label: 'puff', value: 'puff'},
                    {label: 'three-dots', value: 'three-dots'},
                    {label: 'ball-triangle', value: 'ball-triangle'},
                    {label: 'square-jelly', value: 'square-jelly'},
                ],
                loadTypeValue: 'bars',
			}
		},
		methods: {
			openFullScreen () {
				this.fullScreenLoading = true
				setTimeout(() => {
					this.fullScreenLoading = false
				}, 2000)
			},
			openFullScreen2 () {
				const loading = this.$loading({
					lock: true,
					text: 'Loading',
					spinner: 'icon icon-refresh',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				setTimeout(() => {
					loading.close()
				}, 2000)
			},
			loadSkinChange() {
				console.log(this.loadTypeValue)

			}
		}
	}
</script>

<style scoped>
.demo-loading {width: 400px;height: 200px;line-height:80px;text-align:center;border: 2px dashed #d8d8d8;position: relative;font-size: 30px;margin: 10px 0 0 5px;}
</style>